<script setup>
import { Tools } from '@element-plus/icons-vue';
import HomelayoutVue from '@/component/homelayout.vue';
import { useTeacherStore } from '@/stores/modules/teacherStore';
import { useUserStore } from '@/stores/modules/userStore';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps(['menu', 'headerStyle', 'userType', 'parentName']);

const userStore = useUserStore();

const teacherStore = useTeacherStore();

const { teacherName, teacherId, className } = storeToRefs(teacherStore);

const jumpInfo = pathName => {
    router.push({ name: pathName });
};

const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
</script>

<template>
    <HomelayoutVue teacher :menu="props.menu" :headerStyle="props.headerStyle">
        <template #header>
            <header class="header">
                <!-- 如果用户类型为parent则展示 -->
                <template v-if="props.userType == 'parent'">
                    <div class="introduce" @click="jumpInfo('parent-info')">
                        <h3 class="parent-name">
                            你好! {{ props.parentName }}的家长
                        </h3>
                        <div class="label">学生基本信息</div>
                    </div>
                </template>
                <!-- 如果用户类型为teacher则展示 -->
                <template v-else-if="props.userType == 'teacher'">
                    <div class="photo" @click="jumpInfo('teacher-info')">
                        <img
                            :src="PUBLIC_URL + '/head-normal.jpg'"
                            class="photo__img"
                            alt=""
                        />
                    </div>
                    <div class="introduce" @click="jumpInfo('teacher-info')">
                        <h3 class="name">{{ teacherName }}</h3>
                        <div class="number">工号：{{ teacherId }}</div>
                        <div class="className">
                            所带班级：{{ className || '无' }}
                        </div>
                    </div>
                </template>
                <div class="set">
                    <el-dropdown>
                        <span>
                            <el-icon class="icon--set"><Tools /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-if="props.userType == 'teacher'"
                                    @click="jumpInfo('teacher-profile')"
                                >
                                    <span class="dropdown__item">
                                        个人信息
                                    </span>
                                </el-dropdown-item>
                                <el-dropdown-item
                                    v-if="props.userType == 'parent'"
                                    @click="jumpInfo('home-personal')"
                                >
                                    <span class="dropdown__item">
                                        个人信息
                                    </span>
                                </el-dropdown-item>
                                <el-dropdown-item
                                    v-if="props.userType == 'teacher'"
                                    @click="userStore.logout({pathName: 'login', query: { type: 'admin' }})"
                                >
                                    <span class="dropdown__item">
                                        管理员登录
                                    </span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </header>
        </template>
        <template #menu>
            <slot name="menu"></slot>
        </template>
        <template #content>
            <slot name="content"></slot>
        </template>
    </HomelayoutVue>
</template>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;

    .photo {
        width: 40rem;
        height: 40rem;
        border-radius: 20rem;
        overflow: hidden;

        &__img {
            width: 100%;
            height: 100%;
        }
    }

    .introduce {
        flex: 1;
        color: white;
        font-size: 13rem;
        margin-top: 3rem;
        margin-left: 20rem;

        .name {
            font-size: 16rem;
            font-weight: bold;
        }

        .number {
            margin: 4rem 0;
        }

        .parent-name {
            font-size: 20rem;
            font-weight: bold;
        }
        .label {
            margin: 20rem 0;
            width: 100rem;
            padding: 5rem 10rem;
            background-color: rgba(0, 0, 0, 0.3);
        }
    }

    .set {
        width: 24rem;
        height: 24rem;
        margin-left: 20rem;
        margin-right: 5rem;

        .icon--set {
            color: white;
            font-size: 25rem;
        }
    }

    .dropdown__item {
        font-size: 16rem;
    }
}
</style>
